import QtQuick 1.1

MyPage {
    id: messagesPage
    objectName: "messagesPage"


    /************************************************************/
    colorPage: "white"

    Component.onCompleted: {
        cppMessages.initChat( main.chatJid );
    }

    /**-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-**/
    Component {
        id: componentWrapperItem

        Rectangle {
            id: wrapper
            border.color: "blue"
            color: msgMy === true ? "white" : "lightblue"
            radius: 10
            property string text: msgText

            anchors.horizontalCenter: parent.horizontalCenter

            ListView.onAdd: ParallelAnimation {
                NumberAnimation {
                    target: wrapper
                    property: "opacity"
                    from: 0; to: 1
                    duration: 100
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: wrapper;
                    property: "scale";
                    duration: 150;
                    from: 0.1; to: 1
                    easing.type: Easing.InOutQuad
                }
            }

            Image {
                id: imgDlr
                //anchors.left: parent.left;
                //anchors.leftMargin: 10
                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
                source: msgMy !== true ? "qrc:/qml/images/msg_recv.png" : ( msgDlr === true ? "qrc:/qml/images/msg_dlr.png" : "qrc:/qml/images/msg_sent.png")
                height: 32
                width: 32
                smooth: true
                Component.onCompleted: {
                    if( msgMy == true ) {
                        imgDlr.anchors.right = parent.right
                        imgDlr.anchors.rightMargin = 10
                    } else {
                        imgDlr.anchors.left = parent.left
                        imgDlr.anchors.leftMargin = 10
                    }
                }
            }

            Image {
                id: imgAvatar
                smooth: true
                height: 32
                width: 32
                //anchors.left: parent.left;
                //anchors.leftMargin: 10
                anchors.top: parent.top; anchors.topMargin: 10
                source: msgMy === true ? "qrc:/qml/images/avatar.png" : (main.chatAvatar === "" ? "qrc:/qml/images/avatar.png" : main.chatAvatar)
                Image {
                    anchors.centerIn: parent
                    height: parent.height
                    width: parent.width
                    smooth: true
                    source: msgMy === true ? "qrc:/qml/images/meego_frame_32w.png" : "qrc:/qml/images/meego_frame_32b.png"
                }
                Component.onCompleted: {
                    if( msgMy == true ) {
                        imgAvatar.anchors.right = parent.right
                        imgAvatar.anchors.rightMargin = 10
                    } else {
                        imgAvatar.anchors.left = parent.left
                        imgAvatar.anchors.leftMargin = 10
                    }
                }
            }

            Text {
                id: txtHeader
                anchors.top: parent.top; anchors.topMargin: 10
                anchors.left: msgMy == true ? parent.left : imgDlr.right; anchors.leftMargin: 10
                text:  msgMy === true ? "[" + msgDateTime + "] :" : "[" + msgDateTime + "]  " + main.chatJid + ":"
                //font.bold: true
                font.pixelSize: 20
                color: msgMy === true ? "blue" : "black"
            }

            Text {
                id: text_field
                anchors.left: msgMy == true ? parent.left : imgDlr.right; anchors.leftMargin: 10
                anchors.right: msgMy == true ? imgDlr.left : parent.right; anchors.rightMargin: 10
                anchors.top: txtHeader.bottom; anchors.topMargin: 5
                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
                text: wrapper.text
                wrapMode: Text.WordWrap
                font.pixelSize: 20
            }

            Text {
                id: dummy_text
                text:  wrapper.text
                visible: false
            }

            states: [
                State {
                    name: "wide text"
                    when: wrapper.text.length > 20
                    PropertyChanges {
                        target: wrapper
                        width: listViewMessages.width - 10
                        height: text_field.paintedHeight + text_field.anchors.topMargin + text_field.anchors.bottomMargin < 94 ? 94 : (text_field.paintedHeight + text_field.anchors.topMargin + text_field.anchors.bottomMargin + txtHeader.height + text_field.anchors.topMargin)
                    }
                },
                State {
                    name: "not wide text"
                    when: wrapper.text.length <= 20
                    PropertyChanges {
                        target: wrapper
                        //width: dummy_text.paintedWidth
                        width: listViewMessages.width - 10
                        height: text_field.paintedHeight + text_field.anchors.topMargin + text_field.anchors.bottomMargin < 94 ? 94 : (text_field.paintedHeight + text_field.anchors.topMargin + text_field.anchors.bottomMargin + txtHeader.height + text_field.anchors.topMargin)
                    }
                }
            ]

            MouseArea {
                id: maMsg
                anchors.fill: parent
                onPressAndHold: {
                }
            }
        }

    }

    /**-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-**/


    property bool flTyping: false
    property bool flSendMsg: false
    Timer {
        id: timerTextTyping
        interval: 3000
        repeat: true
        onTriggered: {
            if( flTyping == false ) {
                timerTextTyping.stop()
                cppMyXmppClient.typingStop( main.chatJid )
            }
            flTyping = false
        }
    }

    ListView {
        id: listViewMessages
        anchors.top: parent.top; anchors.topMargin: 5
        anchors.bottom: panelWriteText.top; anchors.bottomMargin: 5
        anchors.left: parent.left;// anchors.leftMargin: 5
        anchors.right: parent.right;// anchors.rightMargin: 5
        clip: true
        model: cppListOfMessages
        delegate: componentWrapperItem
        spacing: 5
        onCountChanged: {
            listViewMessages.positionViewAtIndex(count - 1, ListView.Beginning)
        }
        onHeightChanged: {
            listViewMessages.positionViewAtIndex(count - 1, ListView.Beginning)
        }
    }


    Rectangle {
        id: panelWriteText
        height: 100
        anchors.bottom: main.inPortrait == true ? toolBar.top : parent.bottom;
        anchors.left: parent.left;
        anchors.right: parent.right;
        color: "gray"

        Rectangle {
            id: wrapperTextEdit
            anchors.bottom: parent.bottom; anchors.bottomMargin: 5
            anchors.left: parent.left; anchors.leftMargin: 5
            anchors.right: wrapperImgSend.left; anchors.rightMargin: 5
            anchors.top: parent.top; anchors.topMargin: 5
            border.color: "blue"
            border.width: 2
            color: "white"
            radius: 8
            clip: true
            Flickable {
                id: flickMsg
                anchors.fill: parent
                contentHeight: txtMessage.height
                contentWidth: txtMessage.width
                flickableDirection: Flickable.VerticalFlick
                clip: true
                function ensureVisible(r)
                {
                    if (contentX >= r.x)
                        contentX = r.x;
                    else if (contentX+width <= r.x+r.width)
                        contentX = r.x+r.width-width;
                    if (contentY >= r.y)
                        contentY = r.y;
                    else if (contentY+height <= r.y+r.height)
                        contentY = r.y+r.height-height;
                }

                MyTextEdit {
                    id: txtMessage
                    wrapMode: TextEdit.Wrap
                    font.pixelSize: 24
                    width: flickMsg.width
                    height: flickMsg.height
                    onCursorRectangleChanged: flickMsg.ensureVisible( cursorRectangle )
                    onTextChanged: {
                        flTyping = true
                        if( (!timerTextTyping.running) && (flSendMsg==false) ) {
                            timerTextTyping.restart()
                            cppMyXmppClient.typingStart( main.chatJid )
                            flTyping = false
                        }
                    }
                }

            }
        }

        Rectangle {
            id: wrapperImgSend
            height: 100
            width: 100
            anchors.right:parent.right
            //anchors.rightMargin: 5
            anchors.verticalCenter: parent.verticalCenter
            color: "transparent"
            Image {
                id: imgSendMsg
                anchors.centerIn: parent
                source: "qrc:/qml/images/msg_send.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        var ret = cppMessages.sendMyMessage( main.chatJid, txtMessage.text )
                        if( ret ) {
                            flSendMsg = true
                            timerTextTyping.stop()
                            txtMessage.text = ""
                            flTyping = false
                            flSendMsg = false
                            //TODO: play sound
                        }
                    }
                }
            }
        }
    }


    /********************************( Toolbar )************************************/

    ToolBar {
        id: toolBar

        visible: main.inPortrait

        /****/
        ToolButton {
            id: toolBarButtonRoster
            icon: "qrc:/qml/images/bar_roster.png"
            anchors.left: parent.left
            anchors.leftMargin: (0.5*(parent.width/4) - 0.5*toolBarButtonRoster.width)
            onClicked: {
                messagesPage.closePage( "qrc:/qml/RosterPage.qml" )
            }
            pauseAnim: 500
        }
        ToolButton {
            id: toolBarButtonChats
            icon: "qrc:/qml/images/bar_open_chats.png"
            anchors.left: parent.left
            anchors.leftMargin: (1.5*(parent.width/4) - 0.5*toolBarButtonChats.width)
            onClicked: {
                messagesPage.closePage( "qrc:/qml/ChatsPage.qml" )
            }
            pauseAnim: 600
        }
        ToolButton {
            id: toolBarButtonSmiles
            icon: "qrc:/qml/images/bar_smiles.png"
            anchors.left: parent.left
            anchors.leftMargin: (2.5*(parent.width/4) - 0.5*toolBarButtonSmiles.width)
            onClicked: {
            }
            pauseAnim: 700
        }
        ToolButton {
            id: toolBarButtonOptions
            icon: "qrc:/qml/images/bar_options.png"
            anchors.left: parent.left
            anchors.leftMargin: (3.5*(parent.width/4) - 0.5*toolBarButtonOptions.width)
            onClicked: {
            }
            pauseAnim: 800
        }
    }
    /*********************************************************************/
}
